// eslint-disable-next-line vue/multi-word-component-names
<template>
  <div id="main">
    订单
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      talbedata: [
        {
          title: "上衣",
          ck: 20,
          xl: 5,
        },
        {
          title: "裤子",
          ck: 40,
          xl: 14,
        },
        {
          title: "袜子",
          ck: 60,
          xl: 20,
        },
        {
          title: "外套",
          ck: 80,
          xl: 23,
        },
        {
          title: "雨伞",
          ck: 100,
          xl: 35,
        },
        {
          title: "雨雪",
          ck: 120,
          xl: 40,
        },
        {
          title: "小明",
          ck: 20,
          xl: 5,
        },
        {
          title: "小明",
          ck: 20,
          xl: 5,
        },
        {
          title: "小明",
          ck: 20,
          xl: 5,
        },
        {
          title: "小明",
          ck: 20,
          xl: 5,
        },
        {
          title: "小明",
          ck: 20,
          xl: 5,
        },
      ],
    };
  },
  mounted() {
    var myChart = echarts.init(document.querySelector(".one"));
    myChart.setOption({
      title: {
        text: "入门示例",
        subtext: "2022年1月份",
      },
      legend: {},
      grid: {
        left: "10%",
        right: "10%",
        top: "40%",
        bottom: "10%",
      },
      tooltip: {},
      xAxis: {
        data: this.talbedata.map((v) => v.title),
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: this.talbedata.map((v) => v.xl),
        },
        {
          name: "库存",
          type: "bar",
          data: this.talbedata.map((v) => v.ck),
        },
      ],
    });
  },
};
</script>

<style>
#main {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 800px;
  align-content: space-between;
}
#main > div {
  width: 39%;
  height: 300px;
  border: 1px solid gray;
}
</style>